
<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css" />
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css" />
<!--vue脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-helper.js">
</script>

<style type="text/css">
a {
	color: black;
}

a:hover {
	text-decoration: none;
}

.bgc-w {
	background-color: #fff;
}

.block {
	display: inline-block;
	width: 20px;
}

.co {
	color: blue;
}

.bl {
	color: black;
}

.commen {
	cursor: pointer;
}
</style>
<body  id="app">
<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">任务管理</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
			disabled="disabled">任务管理</a>
	</div>
</div>
<div class="row" style="padding-top: 15px;">
	<div class="col-md-12 thistable">
		<!--id="container"-->
<div class="bgc-w box box-primary">
	<!--盒子头-->
	<div class="box-header">
		<h3 class="box-title">
			<a href="taskadd.html" class="label label-success" style="padding: 5px;">
				<span class="glyphicon glyphicon-plus"></span> 新增
			</a>
		</h3>
		<div class="box-tools">
			<div class="input-group" style="width: 150px;">
				<input type="text" class="form-control input-sm cha"
					placeholder="查找..." />
				<div class="input-group-btn chazhao">
					<a class="btn btn-sm btn-default"><span
						class="glyphicon glyphicon-search"></span></a>
				</div>
			</div>
		</div>
	</div>
	<!--盒子身体-->
	<div class="box-body no-padding">
		<div class="table-responsive">
			<table class="table table-hover table-striped">
				<thead>
					<tr>
						<th scope="col" class="co commen ">类型<span class="block"></span></th>
						<th scope="col">标题</th>
						<th scope="col" class="co commen ">发布时间<span class="block"></span></th>
						<th scope="col">发布人</th>
						<th scope="col">部门</th>
						<th scope="col" class="co commen ">状态<span class="block"></span></th>
						<th>置顶</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>
						<tr >
							<td><span>公事</span></td>
							<td><span>统计报表</span></td>
							<td><span>2019-1-10 11:56:24</span></td>
							<td><span>小李父斯基</span></td>
							<td><span>研发部</span></td>
							<td><span class="label label-primary">进行中</span></td>
								<td> <span class="labels"><label><input type="checkbox" name="top" class="val" checked disabled><i>✓</i></label></span></td>
							<td><a  href="taskedit.html?id=51"
								class="label xiugai"><span
									class="glyphicon glyphicon-edit"></span> 修改</a>
									<a href="tasksee.html?id=51" class="label xiugai"><span
									class="glyphicon glyphicon-search"></span> 查看</a>
									 <a href="shanchu?id=51" onclick="{return confirm('删除该记录将不能恢复，确定删除吗？');};"
								class="label shanchu"><span
									class="glyphicon glyphicon-remove"></span> 删除</a></td>
						</tr>
					<tr v-for="obj in list">
						<td><span>{{obj.aoaTypeList.typeName}}</span></td>
						<td><span>{{obj.title}}</span></td>
						<td><span>{{obj.publishTime}}</span></td>
						<td><span>{{obj.aoaUser.userName}}</span></td>
						<td><span>{{obj.aoaDept.deptName}}</span></td>
						<td>
							<span class="label label-warning" v-if="obj.statusId==7">已完成</span>
							<span class="label label-primary" v-else="obj.statusId==6">进行中</span>
						</td>
							<td> <span class="labels"><label><input type="checkbox" name="top" class="val" disabled><i>✓</i></label></span></td>
						<td><a  href="taskedit.html?id=52"
							class="label xiugai"><span
								class="glyphicon glyphicon-edit"></span> 修改</a> 
								<a href="tasksee.html?id=52" class="label xiugai"><span
								class="glyphicon glyphicon-search"></span> 查看</a>
								 <a href="shanchu?id=52" onclick="{return confirm('删除该记录将不能恢复，确定删除吗？');};"
							class="label shanchu"><span
								class="glyphicon glyphicon-remove"></span> 删除</a></td>
					</tr>

				</tbody>
			</table>
		</div>
	</div>

	<!--盒子尾-->
<div class="box-footer no-padding" style="margin-top: -20px;">
	<div style="padding: 5px;">
		<div id="page"
			style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
			<div style="width: 40%; float: left;">
				<div class="pageInfo" style="margin-left: 5px;">
					共<span>{{total}}</span>条 | 每页<span>{{page.size}}</span>条
					| 共<span>{{pages}}</span>页
				</div>
			</div>
			<div style="width: 60%; float: left;">
				<div class="pageOperation">
				<!--判断是否是第一页  -->
					<a class="btn btn-sm btn-default no-padding tablefirst" style="width: 30px; height: 20px;" @click="first"> <span
						class="glyphicon glyphicon-backward"></span></a> 
					<a class="btn btn-sm btn-default no-padding tableup" style="width: 30px; height: 20px;" @click="up"> <span
						class="glyphicon glyphicon-triangle-left"></span></a> 
				<a disabled="disabled" class="btn btn-default no-padding" style="width: 30px; height: 20px;">
						{{page.current}}
				</a>
				<!--判断是否是最后一页  -->
					<a class="btn btn-sm btn-default no-padding tabledown"  style="width: 30px; height: 20px;" @click="next()"> <span
						class="glyphicon glyphicon-triangle-right"></span></a> 
					<a class="btn btn-sm btn-default no-padding tablelast" style="width: 30px; height: 20px;" @click="last"> <span
						class="glyphicon glyphicon-forward"></span></a> 
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script>
		/* 分页插件按钮的点击事件 */
		/* url是从后台接收过来的链接，sort是记录排序规则 */
		$('.tablefirst').on('click',function(){
			 if(true==false){
				 $('.thistable').load('paixu?page=0');
			 }
		});
		$('.tableup').on('click',function(){
			 if(true==false){
				 $('.thistable').load('paixu?page=-1');
			 }
		});
		$('.tabledown').on('click',function(){
			if(true==false){
				$('.thistable').load('paixu?page=1');
			 }
		});
		$('.tablelast').on('click',function(){
			if(true==false){
				$('.thistable').load('paixu?page=0');
			 }
			
		});
		
		/*类型、状态、时间的排序  */
		$('.thistype').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('paixu?type=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('paixu?type=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thisstatus').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('paixu?status=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('paixu?status=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thistime').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('paixu?time=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('paixu?time=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thisvisit').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('paixu?visitnum=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('paixu?visitnum=1&icon=glyphicon-triangle-bottom');
			}
		});
		/* 查找 */
		$('.baseKetsubmit').on('click', function() {
			var baseKey = $('.baseKey').val();
			console.log(baseKey);
			$('.thistable').load('paixu?baseKey='+baseKey+'');
		});
</script></div>

<script>
		/* 分页插件按钮的点击事件 */
		
		$('.baseKetsubmit').on('click',function(){
			var baseKey=$('.baseKey').val();
			$('.thistable').load('paixu?baseKey=baseKey');
		});
		

		   $(function(){
			   $(".chazhao").click(function(){
				   var con=$(".cha").val();
				   $(".thistable").load("paixu",{val:con});
			   });
			   
			   $(".commen").click(function(){
				   
					/* //寻找指定兄弟节点并去除class
					var $else=$(this).addClass("mm").siblings(".commen").removeClass("mm");
					//点击变换字体颜色
					var $color=$(this).addClass("bl").removeClass("co").siblings(".commen").addClass("co").removeClass("bl");
					//切换img
					$("#img").appendTo(".mm span"); */	
					var $val=$(this).text();
					
					 $(".thistable").load("paixu",{val:$val});
					
					
				})
			  
		   })
	
		
</script>	</div>
	<script>
		Vue.createApp({
			data(){
				return {
					//初始页数、条数
					page:{
						size:5,
						current:1,
					},
					//接收任务集合
					list:[],
					//总条数
					total:null,
					//最大页数
					pages:null,
				}
			},
			methods:{
				//第一页
				first(){
					if(this.page.current==1){
						return ;
					}
					this.page.current=1;
					this.loadList();
				},
				//最后一页
				last(){
					if(this.page.current==this.pages){
						return ;
					}
					this.page.current=this.pages;
					this.loadList();
				},
				//上一页
				up(){
					if(this.page.current==1){
						return ;
					}
					let ss=this.page.current;
					ss=ss-1<1 ? 1: (ss-1);
					this.page.current=ss;
					console.info(ss)
					this.loadList();
				},
				//下一页
				next(){
					if(this.page.current==this.pages){
						return ;
					}
					let ss=this.page.current;
					ss=ss+1>this.pages ? this.pages: (ss+1);
					this.page.current=ss;
					console.info(ss)
					this.loadList();
				},
				loadList(){
					requestGet("/api-core/aoaTaskList/queryList",this.page).then((data)=>{
						console.info(data)
						this.list=data.records;
						this.total=data.total;
						this.pages=data.pages;
						this.page.size=data.size;
						this.page.current=data.current;
					})
				}
			},
			created(){
				this.loadList();
			}
		}).mount("#app");
	</script>
</div>



